<template>
  <div class="mpage">
    <img
      class="title_page"
      style="margin-top: 0.4rem"
      src="../assets/images/manage_report.png"
    />
    <div class="summary_box">
      <p class="s_title">汇总报告</p>
      <ul class="s_list">
        <li>
          <label>起始日期：</label>
          <yd-datetime type="date" v-model="params.startdatatime"></yd-datetime>
        </li>
        <li>
          <label>截止日期：</label>
          <yd-datetime type="date" v-model="params.enddatatime"></yd-datetime>
        </li>
      </ul>
    </div>
    <div class="control_btn">
      <div class="btn" @click="getData()">查询</div>
      <div class="btn red" @click="downinfotime()">下载</div>
    </div>
    <div class="info_card">
      <p class="title">-汇总信息-</p>
      <ul class="info_list">
        <li>
          <i class="icon"></i>
          <label>交易天数</label>
          <span>{{ daylistObj.length }}天</span>
        </li>
        <li>
          <i class="icon"></i>
          <label>交易比数</label>
          <span>{{ allObj.num }}笔</span>
        </li>
        <li>
          <i class="icon"></i>
          <label>总金额</label>
          <span>¥{{ allObj.money || 0 }}</span>
        </li>
        <li>
          <i class="icon"></i>
          <label>总入账</label>
          <span>¥{{ allObj.allmoney || 0 }}</span>
        </li>
      </ul>
    </div>
    <div class="info_card">
      <p class="title">明细信息</p>
      <ul class="info_list">
        <li v-for="item in infoObj" :key="'mxxx' + item.id">
          <i class="icon calendar"></i>
          <label>{{ item.transDate }}</label>
          <span>{{ item.num }}笔/<br />¥{{ item.money }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { DateTime } from "vue-ydui/dist/lib.rem/datetime";
import moment from "moment";
import { querytotal, downinfotime } from "@api/public";
import $store from "../store";

Vue.component(DateTime.name, DateTime);
export default {
  name: "Manage",
  data() {
    return {
      params: {
        startdatatime: moment().add("day", -7).format("YYYY-MM-DD"),
        enddatatime: moment().format("YYYY-MM-DD"),
      },
      allObj: {},
      daylistObj: [],
      infoObj: [],
    };
  },
  methods: {
    getData() {
      querytotal({
        ...this.params,
        ...{ username: $store.state.app.userInfo.username },
      })
        .then((res) => {
          this.allObj = JSON.parse(res.data.all)[0];
          this.daylistObj = JSON.parse(res.data.daylist);
          this.infoObj = JSON.parse(res.data.info);
        })
        .catch((err) => {
          this.$dialog.error(err.msg);
        });
    },
    downinfotime() {
      downinfotime({
        ...this.params,
        ...{ username: $store.state.app.userInfo.username },
      }).then((res) => {
        this.$dialog.success(res.data.msg);
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>